import React from 'react'
import { Form, Input, Button } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useMount } from 'ahooks'//js控制高度插件
import './index.css'
import { IAdminLogin } from '@/service/admin';
import { connect } from 'umi'
 

const Login = (props) => {
  console.log(props);
  
  const onFinish = (values: IAdminLogin) => {
    console.log('Received values of form: ', values);
    props.dispatch({
      type:'admin/loginReq',
      payload:values
    })
  };
  useMount ( () => {
      let height: number = document.documentElement.offsetHeight
      let login_container: any = document.querySelector('.login_container')
      login_container.style.height = height + 'px'
  })
  return (
    <div className="login_container">
        <Form
      name="normal_login"
      className="login-form"
      initialValues={{ remember: true }}
      onFinish={onFinish}
    >
      <Form.Item
        name="adminname"
        rules={[{ 
            required: true,
            pattern: /^[a-zA-Z0-9_-]{4,16}$/,
            message: '请输入4-16位有效字符，包含字母、数字，下划线' }]}
      >
        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[{ message: '请输入6位字符的密码' }]}
      >
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="password"
        />
      </Form.Item>
      

      <Form.Item>
        <Button type="primary" htmlType="submit" className="login-form-button">
          登录
        </Button>
        
      </Form.Item>
    </Form>
    </div>
  );
};
export default connect((state)=> {
  console.log(state);
  return {}
  
})(Login)